<template>
  <div class="box">
    <div ref="fwltjChart" :style="{width: '980px', height: '400px'}"></div>
  </div>
</template>
 
<script>
export default {
  mounted() {
    this.drawLine();
  },
  methods: {
    drawLine() {
      var myChart = this.$echarts.init(this.$refs.fwltjChart);
      myChart.setOption({
        title: {
          // text: "访问量统计"
        },
        tooltip: {
          trigger: "axis",
          // 坐标轴指示器配置项。
          axisPointer: {
            type: "cross" //指示器样试
          }
        },
        toolbox: {
          feature: {
            // 动态类型切换,切换图表
            magicType: {
              type: ["line", "bar"]
            },
            //数据视图工具，可以展现当前图表所用的数据，编辑后可以动态更新。
            dataView: {
              show: true, //是否显示 数据示图
              readOnly: false //是否 直接可以编辑数据。
            },
            //保存为图片的配置
            saveAsImage: {
              show: true
            },
            //配置项还原
            restore: { show: true }
          }
        },
        //图例组件展现了不同系列的标记(symbol)，颜色和名字。可以通过点击图例控制哪些系列不显示。
        legend: {
          data: ["总访问量", "总会话量","有效会话量"] //对应的是name
        },
        //配置X轴
        xAxis: {
          //坐标轴类型
          type: "category",
          //配置类目名称。 可以逐一设置，具体看文档
          data: [
            "10:00",
            "10:30",
            "11:00",
            "11:30",
            "12:00",
            "12:30",
            "13:00",
            "13:30",
            "14:00",
            "14:30",
            "15:00",
            "15:30",
            "16:00",
            "16:30",
            "17:00"
          ],
          //配置 鼠标移入时显示的 阴影指示器'line' 直线指示器 'shadow' 阴影指示,器  'none' 无指示器
          axisPointer: {
            show: true, //show 必须写，开关的作用
            type: "shadow"
          }
        },
        //配置Y轴
        yAxis: [
          {
            type: "value", //坐标轴类型
            // name: "会话数",
            min: 0,
            max: 75,
            interval: 15,
            axisLabel: {
              formatter: "{value}"
            }
          }
        ],
        //系列列表。每个系列通过 type 决定自己的图表类型,一个对象表示一个列表
        series: [
          {
            name: "总访问量",
            type: "line",
            data: [40, 34, 36, 50, 48, 62, 49, 50, 55, 65, 57, 65,70,56,61],
            itemStyle: {
              color: "#90EE90"
            }
          },
          {
            name: "总会话量",
            type: "line",
            data: [33, 27, 32, 45, 40, 52, 43, 44, 42, 55, 42, 35,45,33,31],
            itemStyle: {
              color: "#FF0000"
            }
          },

          {
            name: "有效会话量",
            type: "line",
            data: [25, 25, 30, 33, 35, 42, 33, 24, 32, 45, 32, 25,40,30,25],
            itemStyle: {
              color: "#F90"
            }
          },
        ],
        //图表的颜色
        color: [
          "#CCC",
          "#AFA",
          "#61a0a8",
          "#d48265",
          "#91c7ae",
          "#749f83",
          "#ca8622",
          "#bda29a",
          "#6e7074",
          "#546570",
          "#c4ccd3"
        ]
      });
      //鼠标事件
      myChart.on("click", function(params) {
        console.log(params);
      });
    }
  }
};
</script>
 
<style scoped>
.box {
  margin-top: 50px;
  padding-left: 0px;
}
</style>